<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>在线微信对话生成器</title>
	<meta name="keywords" content="免费在线微信对话生成器" />
	<meta name="description" content="在线微信对话生成器是一款在线微信聊天对话制作的工具" />
	<meta name="render" content="webkit">
	<link rel="icon" href="favicon.png">
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<meta content="telephone=no, address=no" name="format-detection">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<script type="text/javascript">
		var _path = { images: '' }
		var page = { data: {} }
	</script>
	<link rel="stylesheet" href="static/app/css/zui.min.css">
	<link rel="stylesheet" href="static/app/css/app.css">
	<link rel="stylesheet" href="static/app/css/wallet.css">
	<script type="text/javascript" src="static/app/js/common.bundle.js"></script>
	<script type="text/javascript" src="static/app/js/chat.bundle.js"></script>
</head>
<body>
	<div id="vueApp" class="wrapper">
		<div class="container-fluid page-content">
			<div id="pageHeader">微信对话生成器</div>
			<div class="edit-content">
				<div class="tab">
					<ul class="nav nav-tabs">
						<li class="active"><a data-tab href="#tabContent1">外观设置</a></li>
						<li><a data-tab href="#tabContent2">对话设置</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="tabContent1">
							<!-- 外观设置 -->
							<div class="view-setting">
								<div class="view-set-item">
									<span>手机信号：</span>
									<select v-model="phone.single" class="form-control">
										<option value="1">1格</option>
										<option value="2">2格</option>
										<option value="3">3格</option>
										<option value="4" selected="selected">4格</option>
									</select>
								</div>
								<div class="view-set-item">
									<span>网络信号：</span>
									<select v-model="phone.wifi" class="form-control">
										<option value="1">wifi</option>
										<option value="2">3G</option>
										<option value="3">4G</option>
										<option value="4">5G</option>
									</select>
								</div>
								<div class="view-set-item">
									<span>wifi信号：</span>
									<select v-model="phone.wifi_single" class="form-control">
										<option value="1">1格</option>
										<option value="2">2格</option>
										<option value="3" selected="selected">3格</option>
									</select>
								</div>
								<div class="view-set-item">
									<span>手机时间：</span>
									<select v-model="phone.time_hour" class="form-control edit-phone-time-hour"></select>
									<select v-model="phone.time_mini" class="form-control edit-phone-time-mini"></select>
								</div>
								<div class="view-set-item">
									<span>充电中：</span>
									<label class="my-radio"><input type="radio" name="charge"v-model="phone.battery_charge" value="1"> 是</label>
									<label class="my-radio"><input type="radio" name="charge"v-model="phone.battery_charge" value="0" checked> 否</label>
								</div>
								<div class="view-set-item">
									<span>手机电量：</span>
									<input @change="onBatteryChange($event)" type="range" v-model="phone.battery_amount"
										min="0" max="100" value="50" />
									&nbsp;&nbsp;&nbsp;{{phone.battery_amount}}%
								</div>
								<div class="view-set-item">
									<span>听筒模式：</span>
									<label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="1"> 是</label>
									<label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="0" checked> 否</label>
								</div>
								<div class="view-set-item">
									<span>消息数目：</span>
									<input type="number" name="phone-msg-count" class="form-control" v-model.number="setting.message">
								</div>
								<div class="view-set-item">
									<span>聊天标题：</span>
									<input type="text" class="form-control" v-model="setting.title">
								</div>
								<div class="view-set-item">
									<span>语音模式：</span>
									<label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="1"> 是</label>
									<label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="0" checked> 否</label>
								</div>
								<div class="view-set-item">
									<span>聊天背景：</span>
									<a class="a-phone-set-bg" href="javascript:;" title="选择背景图">
										<font>+</font>
										<img class="img-phone-set-bg" :src="setting.background" />
										<input @change="setBackground($event)" type="file" />
										<span @click="deleteBackground" v-if="setting.background != ''">x</span>
									</a>
								</div>
							</div>
						</div>
						<!-- 对话设置 -->
						<div class="tab-pane" id="tabContent2">
							<div class="dialog-user">
								<div class="dialog-user-title">编辑和选择用户（<font>第一个用户默认是自己</font>）</div>
								<div class="dialog-user-items">
									<div class="dialog-user-item el-remove">
										<div class="dialog-user-face">
											<a class="dialog-user-face-a" href="javascript:;">
												<input type="file" placeholder="点击更换头像">
												<i></i>
											</a>
											<input type="text" value="微信对话生成器" />
											<a class="dialog-user-select">选择用户</a>
											<a class="dialog-user-delete">x</a>
										</div>
									</div>
									<div class="dialog-user-item el-remove">
										<div class="dialog-user-face">
											<a class="dialog-user-face-a" href="javascript:;">
												<input type="file" placeholder="点击更换头像">
												<i style="background-image: url(/static/app/images/10014.jpg)"></i>
											</a>
											<input type="text" value="马先生" />
											<a class="dialog-user-select">选择用户</a>
											<a class="dialog-user-delete">x</a>
										</div>
									</div>
									<div v-for="(user, index) in users" class="dialog-user-item">
										<div class="dialog-user-face">
											<a class="dialog-user-face-a" href="javascript:;">
												<input @change="setUserImage($event, index)" type="file"
													placeholder="点击更换头像">
												<i :style="'background-image: url(' + user.image + ')'"></i>
											</a>
											<input type="text" v-model="user.name" />
											<a @click="selectUser(index)"
												:class="['dialog-user-select', {'dialog-user-selected':user.selected}]">选择用户</a>
											<a v-if="!user.is_me" @click="delUser(index)" class="dialog-user-delete"
												title="删除用户">x</a>
										</div>
									</div>
									<div class="dialog-user-item">
										<a @click="addUser" class="dialog-user-item-add" href="javascript:;"
											title="添加用户">+</a>
									</div>
								</div>

								<div class="dialog-user-content-title">发送人：{{getSender()}}</div>
								<div class="dialog-user-content">
									<div class="dialog-user-content-panel">
										<textarea v-model="setting.dialog_content"
											class="edit-dialog-text form-control"></textarea>
									</div>
									<div class="view-setting view-setting2">
										<div class="view-set-item">
											<span>红包或转账金额：</span>
											<input v-model.number="setting.dialog_money" type="number"
												class="form-control">
										</div>
										<div class="view-set-item">
											<span>添加聊天时间：</span>
											<select v-model="setting.date_year"
												class="form-control edit-phone-time-year">
												<option value="">-</option>
											</select>
											<select v-model="setting.date_month"
												class="form-control edit-phone-time-month" style="width: 60px;">
												<option value="">-</option>
											</select>
											<select v-model="setting.date_day" class="form-control edit-phone-time-day"
												style="width: 60px;">
												<option value="">-</option>
											</select>
											<select v-model="setting.date_xinqi" class="form-control">
												<option value="">-</option>
												<option value="星期一">星期一</option>
												<option value="星期二">星期二</option>
												<option value="星期三">星期三</option>
												<option value="星期四">星期四</option>
												<option value="星期五">星期五</option>
												<option value="星期六">星期六</option>
												<option value="星期日">星期日</option>
											</select>
											<select v-model="setting.date_shiduan" class="form-control"
												style="width: 60px;">
												<option value="">-</option>
												<option value="上午">上午</option>
												<option value="下午">下午</option>
												<option value="凌晨">凌晨</option>
											</select>
											<select v-model="setting.date_hour"
												class="form-control edit-phone-time-hour" style="width: 60px;">

											</select>
											：
											<select v-model="setting.date_min" class="form-control edit-phone-time-mini"
												style="width: 60px;">

											</select>
										</div>
										<div class="view-set-item">
											<span>语音时间：</span>
											<input v-model.number="setting.dialog_voice" type="number"
												class="form-control">
											&nbsp;&nbsp;&nbsp;
											<label>是否已读：</label>
											<label class="my-radio"><input type="radio"
													v-model="setting.dialog_voice_isread" value="1" checked>
												是</label>
											<label class="my-radio"><input type="radio"
													v-model="setting.dialog_voice_isread" value="0"> 否</label>
										</div>
										<div class="view-set-item">
											<span>红包备注：</span>
											<input v-model="setting.dialog_repacket_remark" type="text"
												class="form-control">
										</div>
										<div class="view-set-item">
											<span>转账备注：</span>
											<input v-model="setting.dialog_trans_remark" type="text"
												class="form-control">
										</div>
									</div>
									<div class="btn-groups">
										<div class="btn-group">
											<button @click="addTextDialog" class="btn btn-success">添加文字对话</button>
											<button @click="addNoticeDialog" class="btn btn-primary">添加时间</button>
											<button class="btn btn-primary btn-send-image">添加图片对话<input
													@change="addImageDialog($event)" type="file"></button>

										</div>
										<div class="btn-group">
											<button @click="addVoiceDialog" class="btn btn-primary">添加语音对话</button>
											<button @click="addRedpacketDialog" class="btn btn-primary">添加红包对话</button>
											<button @click="addTransferDialog" class="btn btn-primary">添加转账对话</button>
										</div>
									</div>
									<button class="btn-clear" @click="cleanDialogs" href="javascript:;">清空聊天内容</button>
									<button class="btn-clear" @click="save" href="javascript:;">生成图片</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- phone -->
				<div class="phone-wrap">
					<div class="phone-content">
						<div id="phone" class="phone">
							<div class="phone-top">
								<div class="phone-bar">
									<div class="phone-time">{{phone.time_hour}}:{{phone.time_mini}}</div>
									<div
										:class="['phone-sigle', {'phone-sigle-v1':phone.single == 1}, {'phone-sigle-v2':phone.single == 2}, {'phone-sigle-v3':phone.single == 3}, {'phone-sigle-v4':phone.single == 4}]">
										信号</div>
									<div
										:class="['phone-wifi', {'phone-wifi-v2':phone.wifi > 1}, phone.wifi == 1 ? 'phone-wifi-s' + phone.wifi_single : '']">
										<template v-if="phone.wifi == 1">
											wifi
										</template>
										<template v-else-if="phone.wifi == 2">
											3G
										</template>
										<template v-else-if="phone.wifi == 3">
											4G
										</template>
										<template v-else-if="phone.wifi == 4">
											5G
										</template>
									</div>
									<div :class="['phone-battery', {'phone-battery-charge':phone.battery_charge == 1}]">
										<span>
											<font :style="[{width: phone.battery_amount + '%'}]">电量</font>
											<i></i>
										</span>
									</div>
								</div>
								<div class="phone-nav">
									<div class="phone-nav-left">
										<div class="phone-nav-back">返回</div>
										<span v-if="setting.message && setting.message > 0">{{setting.message}}</span>
									</div>
									<div class="phone-nav-center">
										<span>
											<font>{{setting.title}}</font>
											<i v-if="phone.ear == 1"></i>
										</span>
									</div>
									<div class="phone-nav-right">
										<div class="phone-nav-more">更多</div>
									</div>
								</div>
							</div>

							<div class="phone-bg">
								<img @load="onBackgroundLoad($event)" :src="setting.background" />
							</div>

							<div class="phone-water"></div>

							<div class="phone-body">
								<div class="wechat-content">
									<template v-for="(dialog, index) in dialogs">
										<div :class="['wechat-dialog', {'wechat-dialog-right':dialog.is_me}]">
											<div v-if="dialog.type != 'notice'" class="wechat-dialog-face">
												<img :src="getUserById(dialog.user_id).image" />
											</div>

											<template v-if="dialog.type == 'text'">
												<div class="wechat-dialog-text">{{dialog.content}}</div>
											</template>

											<template v-if="dialog.type == 'image'">
												<div
													:class="['wechat-dialog-text', 'wechat-dialog-image', {'wechat-dialog-image-noborder':setting.background != ''}]">
													<img :src="dialog.image">
												</div>
											</template>

											<template v-if="dialog.type == 'voice'">
												<div class="wechat-dialog-text wechat-dialog-voice">
													<div v-if="dialog.is_me"
														:style="{width: getVoiceLength(dialog.time) + 'px'}"></div>
													<span v-if="dialog.is_me">{{dialog.time}}"</span>
													<i></i>
													<span v-if="!dialog.is_me">{{dialog.time}}"</span>
													<div v-if="!dialog.is_me"
														:style="{width: getVoiceLength(dialog.time) + 'px'}"></div>
													<em v-if="!dialog.is_me && dialog.isread == '0'"></em>
												</div>
											</template>

											<template v-if="dialog.type == 'notice'">
												<div class="wechat-dialog-notice">
													<span
														:class="[{'wechat-dialog-notice-has-bg':setting.background != ''},{'wechat-dialog-notice-system':dialog.is_system}]"
														v-html="dialog.content"></span>
												</div>
											</template>

											<template v-if="dialog.type == 'transfer' || dialog.type == 'redpacket'">
												<div
													:class="['wechat-dialog-text', 'wechat-dialog-trans', {'wechat-dialog-trans-get':dialog.is_get}]">
													<div
														:class="['wechat-dialog-trans-content', {'wechat-dialog-redp-content':dialog.type == 'redpacket'}]">
														<i></i>
														<div>
															<span
																v-if="dialog.type == 'transfer'">¥{{moneyFormat(dialog.money,
																2, '', false)}}</span>
															<font v-if="dialog.type == 'transfer'">{{dialog.remark}}
															</font>
															<span
																v-if="dialog.type == 'redpacket'">{{dialog.remark}}</span>
															<font v-if="dialog.type == 'redpacket' && dialog.is_get">
																已领取</font>
														</div>
													</div>
													<div class="wechat-dialog-trans-bottom">
														<span v-if="dialog.type == 'transfer'">微信转账</span>
														<span v-if="dialog.type == 'redpacket'">微信红包</span>
													</div>
												</div>
											</template>

											<a @click="deleteDialog(index)" class="a-wechat-dialog-del"
												href="javascript:;" title="删除对话">X</a>

											<div v-if="!dialog.is_get && dialog.type == 'redpacket'"
												class="a-wechat-dialog-menu">
												<a @click="redpacketGet(index)">领取</a>
											</div>
											<div v-if="!dialog.is_get && dialog.type == 'transfer'"
												class="a-wechat-dialog-menu">
												<a @click="transferGet(index)">领取</a>
											</div>
										</div>
									</template>

									<div class="wechat-dialog el-remove">
										<div class="wechat-dialog-notice">
											<span class="wechat-dialog-notice-has-bg">2019年5月20日 下午4:20</span>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog wechat-dialog-right el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-voice">
											<span>1"</span><i></i>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-voice">
											<i></i><span>1"</span><em></em>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog wechat-dialog-right el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-image"><img
												src="static/app/images/dialog-demo1.jpeg"></div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog wechat-dialog-right el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text">
											hellohelhellohellohellohellohellohellolohello</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-trans">
											<div class="wechat-dialog-trans-content">
												<i></i>
												<div>
													<span>¥1.00</span>
													<font>转账给微截图</font>
												</div>
											</div>
											<div class="wechat-dialog-trans-bottom">
												<span>微信转账</span>
											</div>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
										<div class="a-wechat-dialog-menu">
											<a>领取</a>
										</div>
									</div>
									<div class="wechat-dialog el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-trans wechat-dialog-trans-get">
											<div class="wechat-dialog-trans-content">
												<i></i>
												<div>
													<span>¥1.00</span>
													<font>转账给微截图</font>
												</div>
											</div>
											<div class="wechat-dialog-trans-bottom">
												<span>微信转账</span>
											</div>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog wechat-dialog-right el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-trans">
											<div class="wechat-dialog-trans-content">
												<i></i>
												<div>
													<span>¥1.00</span>
													<font>转账给微截图</font>
												</div>
											</div>
											<div class="wechat-dialog-trans-bottom">
												<span>微信转账</span>
											</div>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog wechat-dialog-right el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-trans wechat-dialog-trans-get">
											<div class="wechat-dialog-trans-content">
												<i></i>
												<div>
													<span>¥1.00</span>
													<font>转账给微截图</font>
												</div>
											</div>
											<div class="wechat-dialog-trans-bottom">
												<span>微信转账</span>
											</div>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>

									<div class="wechat-dialog el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-trans">
											<div class="wechat-dialog-trans-content wechat-dialog-redp-content">
												<i></i>
												<div>
													<span>恭喜发财，大吉大利</span>
												</div>
											</div>
											<div class="wechat-dialog-trans-bottom">
												<span>微信红包</span>
											</div>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
									<div class="wechat-dialog wechat-dialog-right el-remove">
										<div class="wechat-dialog-face">
											<img src="static/app/images/user-face.png" />
										</div>
										<div class="wechat-dialog-text wechat-dialog-trans wechat-dialog-trans-get">
											<div class="wechat-dialog-trans-content wechat-dialog-redp-content">
												<i></i>
												<div>
													<span>恭喜发财，大吉大利</span>
												</div>
											</div>
											<div class="wechat-dialog-trans-bottom">
												<span>微信红包</span>
											</div>
										</div>
										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
									</div>
								</div>
							</div>

							<div class="phone-bottom">
								<div class="phone-bottom-chat">
									<div class="wechat-bottom">
										<div
											:class="['wechat-bottom-icon', 'wechat-voice-icon', {'wechat-voice-say-icon':setting.voice == 1}]">
											语音</div>
										<div :class="['wechat-input', {'wechat-input-say':setting.voice == 1}]">
											<template v-if="setting.voice == 1">按住 说话</template>
											<template v-else>输入框</template>
										</div>
										<div class="wechat-bottom-icon wechat-emoji-icon">表情</div>
										<div class="wechat-bottom-icon wechat-more-icon">更多功能</div>
									</div>
								</div>
								<div class="phone-bottom-bar">
									<i>返回桌面</i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<a style="display: none;" id="lightBoxToggle" href="javascript:;" data-width="300" data-caption="右击图片，点击图片另存为即可下载图片">生成图片</a>
</body>

</html>